<template>
  <div>
    <m-notification :value="99">
      <m-list
        :list="list"
        @clickItem="onClickItem"
        @clickAction="onClickAction"
        :actions="actions"
      ></m-list>
    </m-notification>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <!-- 自定义图标 -->
    <div style="margin-bottom: 15px">自定义图标 最大值999</div>
    <m-notification
      :value="1899"
      :max="999"
      icon="ElementPlus"
    ></m-notification>
    <div style="margin-bottom: 15px">小红点</div>
    <m-notification
      :max="999"
      :isDot="true"
      icon="ElementPlus"
    ></m-notification>
  </div>
</template>

<script setup lang="ts">
import { list, actions } from "./data";
function onClickItem(data: any, index: number) {
  console.log(data, index);
}
function onClickAction(data: any, index: number) {
  console.log(data, index);
}
</script>

<style scoped></style>
